<template>
    <div class="page">
        <div class="filtrateWrap" v-if="filtrateState">
            <div class="filtrateWrap-title">天数</div>
            <div class="filtrateWrap-tags">
                <div class="filtrateWrap-tags-item" :class="searchParams.days.indexOf(key) > -1 ? 'active' : ''" @click="chooseTag('days',key)" v-for="(day, key, index) in searchConditions.days">{{day}}</div>
            </div>
            <div class="filtrateWrap-title">类型</div>
            <div class="filtrateWrap-tags">
                <div class="filtrateWrap-tags-item" :class="searchParams.classify_id.indexOf(typeItem.classify_id) > -1 ? 'active' : ''" @click="chooseTag('classify_id',typeItem.classify_id)" v-for="typeItem in searchConditions.types">{{typeItem.classify_name}}</div>
            </div>
            <div class="filtrateWrap-title">服务语言</div>
            <div class="filtrateWrap-tags">
                <div class="filtrateWrap-tags-item" :class="searchParams.service_languages.indexOf(key) > -1 ? 'active' : ''" @click="chooseTag('service_languages',key)" v-for="(lag, key, index) in searchConditions.service_languages">{{lag}}</div>
            </div>
            <div class="filtrateWrap-title">价格区间</div>
            <div class="filtrateWrap-tags">
                <input type="number" @blur="homing" v-model="searchParams.min_price" placeholder="最低价"/>
                <div class="filtrateWrap-tags-line"></div>
                <input type="number" @blur="homing" v-model="searchParams.max_price"  placeholder="最高价"/>
            </div>
            <div class="filtrateWrap-btns">
                <div @click="resetFiltrate">重置</div>
                <div @click="confirmFiltrate" class="filtrateWrap-btns-confirm">确定</div>
            </div>
        </div>
        <!--遮罩阴影-->
        <div class="shade" v-if="filtrateState" @click="filtrateState = false"></div>
        <div class="head_fixed" ref="headFixed" >
            <img class="banner" :src="city_img" alt="">
            <div class="searchWrap">
                <router-link to="/cityChoose">
                    <img class="back" src="../assets/back-icon.png"/>
                </router-link>
                <router-link to="/search">
                    <div class="searchBar">
                        <img src="../assets/strategy-icon-serch.png" alt="">
                        <input type="text" readonly placeholder="搜索当地玩乐/美食/线路">
                    </div>
                </router-link>
            </div>
            <router-link class="head-city" to="/cityChoose">
                <span class="name">{{city_name}}</span>
                <img class="cut" src="../assets/city-cut.png"/>
            </router-link>
                <span class="head-weather" v-if="weatherData.tmp_min">
                    明日
                    {{weatherData.tmp_min}}~{{weatherData.tmp_max}}℃
                    <span v-if="weatherData.cond_txt_d" class="iconfont" :class="{'icon-yin': weatherData.cond_txt_d.indexOf('阴')>-1,'icon-duoyun':weatherData.cond_txt_d.indexOf('云')>-1,'icon-zhongyu':weatherData.cond_txt_d.indexOf('雨')>-1,'icon-xiaoxue':weatherData.cond_txt_d.indexOf('雪')>-1,'icon-qing':weatherData.cond_txt_d.indexOf('晴')>-1}"></span>
                </span>
            <div class="menuTab">
                <!-- <div class="allBtn" @click="getAllProducts">全部</div> -->
                <div></div>
                <div class="menuTab-sort" @click="showFiltrate">
                    <img src="../assets/filtrate_icon.png" class="menuTab-sort-img"/>筛选
                </div>
            </div>
        </div>
        <div class="city loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
                <div class="city-list" v-infinite-scroll="getProducts" infinite-scroll-disabled="loadEnd" infinite-scroll-distance="50">
                    <div v-for="(item,index) in products" class="city-list-item">
                        <router-link :to="'/show/'+item.goods_id">
                            <img class="city-list-item-img" :src="item.image" />
                            <div class="city-list-item-dayTag" v-if="item.days_str">
                                <span>{{item.days_str}}</span>
                            </div>
                            <div class="city-list-item-cityName" v-if="item.city_name">
                                <img src="../assets/city_position.png" />
                                <span>{{item.city_name}}</span>
                            </div>
                            <div class="city-list-item-t1">{{item.name}}</div>
                            <div class="city-list-item-tags">
                                <span class="goodstag" v-if="item.goodstag">{{item.goodstag}}</span>
                                <span v-else></span>
                                <div class="sell">{{item.order_num}}人已购</div>
                            </div>
                            <div class="city-list-item-price">
                                <div>¥ {{item.jiage}}</div>
                            </div>
                        </router-link>
                    </div>
                </div>
            <div v-show="loading && !loadEnd" class="loadmore-loading">
                <mt-spinner type="fading-circle" style=" display: inline-block;vertical-align: middle;margin-right: 5px;"></mt-spinner>
                加载中...
            </div>
            <div v-show="loadEnd" class="loadmore-loading">
                暂无更多数据...
            </div>
        </div>
        <TabBar ref="tabBar" :curr="tabCurr"></TabBar>

    </div>
</template>

<script>
    import { Toast,InfiniteScroll,Spinner} from 'mint-ui';
    import headerTab from '../components/header-tab.vue'
    import TabBar from "../components/TabBar"
    import config from "../store/config"
    import wxShare from "../store/wxShare"
    import { mapState } from 'vuex'

    export default {
        name: "City",
        components: {
            headerTab,
            TabBar,
        },
        data() {
            return {
                tabCurr: 2,
                url: config.url,
                city_id: '',
                city_name: '',
                city_img: '',
                searchConditions: '',
                collection: {
                    img: require('../assets/city-head-heart.png'),
                    imgHover: require('../assets/city-head-heart-hover.png')
                },
                // 分页参数
                products: [],
                totalPage: 0,
                pageSize: 30,
                page: 1,
                loadEnd: false,  // 为 true， bottom-method 就不会再次执行加载更多
                loading: false,
                wrapperHeight: 0,
                translate: 0,
                moveTranslate: 0,
                weatherData:{},
                filtrateState: false,
                searchParams: {
                    days:[],
                    classify_id:[],
                    service_languages:[],
                    min_price: '',
                    max_price: ''
                }

            }
        },
        computed: mapState({
            appNestState: state => state.appNestState,
        }),
        methods: {
            homing(){
                window.scrollTo(0,0);
            },
            chooseTag(type,val) {
                let typeArr = this.searchParams[type]; 
                let _index = typeArr.findIndex(item => {
                    return item == val;
                })
                if(_index < 0){
                    typeArr.push(val);
                }else{
                    typeArr.splice(_index,1);
                }
            },
            resetFiltrate() {
                this.searchParams.days = [];
                this.searchParams.classify_id = [];
                this.searchParams.service_languages = [];
                this.searchParams.min_price = '';
                this.searchParams.max_price = '';
            },
            confirmFiltrate() {
                let params = {...this.searchParams};
                params.city_id = this.city_id;
                params.pagenum = 1;
                params.pagelimit =  this.pageSize;
                this.page = 1;
                this.filtrateState = false;
                this.products = [];
                this.getProducts(params);
            },
            showFiltrate() {
                this.filtrateState = !this.filtrateState;
            },
            openSort() {
                this.tagView = false;
                this.sort = !this.sort;
            },
            selectSort(val) {
                this.sortIndex = val;
                this.sort = false;
                this.page = 1
                this.products = []
                this.loadDataMore()
            },
            closeMenuTab() {
                this.tagView = false;
            },
            loadData() {
                setTimeout(() => {
                    this.products = [];
                    this.getProducts();
                    //this.$refs.loadmore.onTopLoaded();
                }, 500);
            },
            loadDataMore() {
                setTimeout(() => {
                    this.getProducts();
                    //this.$refs.loadmore.onBottomLoaded();
                }, 300);
            },
            // 获取tab分类、tag
            getSearchConditions() {
                this.axios.get('wap/goods/searchConditions')
                    .then(res => {
                        this.searchConditions = res.data;
                    })
                    .catch(err => console.log(err));
            },
            getAllProducts(){
                this.page = 1;
                this.getProducts()
            },
            getProducts(outsideParams) {
                let _that = this;
                let params = {
                    city_id: _that.city_id,
                    pagelimit: _that.pageSize,
                    pagenum: _that.page
                }
                if(outsideParams){
                    params = outsideParams;
                }
                _that.loading = true;
                _that.axios.postAll('wapgoods', params,true)
                    .then(res => {
                        if (res) {
                            if (res.data.code == 0) {
                                if(!_that.city_img){
                                  _that.city_img =  res.data.data.goods[0].image;
                                }
                                let products = _that.products;
                                let productstext = JSON.stringify(products);
                                var reg = /^(http|https):\/\//;
                                res.data.data.goods.forEach(item => {
                                    if (productstext.indexOf(JSON.stringify(item)) == -1) {
                                        //console.log(reg.test(item.image))
                                        if (!reg.test(item.image)) {
                                            item.image = _that.url + item.image
                                        }
                                        products.push(item);
                                    }
                                })
                                _that.page += 1
                                _that.totalPage = res.data.data.totalpage
                                _that.products = products;
                                
                                if (_that.page <= _that.totalPage) {
                                    _that.loading = true;
                                    _that.loadEnd = false;
                                }else{
                                    _that.loading = false;
                                    _that.loadEnd = true;
                                }
                                if (res.data.data.goods.length < _that.pageSize) {
                                    _that.loading = false;
                                    _that.loadEnd = true;
                                }
                                if(outsideParams){
                                    _that.$nextTick(() => {
                                        _that.$refs.wrapper.scrollTop = 0;
                                    });
                                }
                                
                            } else {
                                _that.products = [];
                                _that.loadEnd = true;
                            }
                            this.share();
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    });
            },
            // 收藏
            collectionFun(index, goods_id) {

                if (!this.$store.state.token) {
                    this.$router.push({path: "/my-login"})
                    return;
                }
                this.axios.post('wapcollection', {'goods_id': goods_id})
                    .then(res => {
                        Toast({message: res.msg, duration: 1000});
                        this.products[index].collection = !this.products[index].collection;
                    })
                    .catch(err => console.log(err));
            },
            getCityWeather(){
                this.axios.postAll('wapweather', {'city_id': this.city_id})
                    .then(res => {
                        if(res.data.code == 0){
                            this.weatherData = res.data.data[1];
                        }
                    })
                    .catch(err => console.log(err));
            },
            // 分享
            share() {
                wxShare({
                    title: '快帮行', // 分享标题
                    desc: '了解' + this.city_name + '的当地玩乐。', // 分享描述
                    //link: window.location.href, // 分享链接
                    imgUrl: this.city_img, // 分享图标
                    debug: false
                }, function () {//分享成功后的回调函数
                    //Toast({message: '分享成功！', duration: 1500});
                    console.log('分享成功')
                });
            }
        },
        mounted() {
            let _that = this;
            let query = this.$route.query;
            for (let key in query) {
                _that[key] = decodeURI(query[key]);
            }
            _that.getSearchConditions();
            this.wrapperHeight = document.body.clientHeight - this.$refs.headFixed.offsetHeight - (!this.appNestState ? this.$refs.tabBar.$el.offsetHeight : 0);
            document.body.scrollTop = document.documentElement.scrollTop = 1;
            _that.getCityWeather();
        },
        created(){
            // if(sessionStorage.tagIndex){
            //     this.menuTabIndex = Number(sessionStorage.tagIndex);
            //     this.tabConfig.sub.activeIndex = Number(sessionStorage.tagIndex);
            // }
        },
        // beforeRouteLeave(to, from, next) {
        //     if (to.name == "show") {
        //         sessionStorage.tagIndex = this.menuTabIndex;
        //         next();
        //     }else{
        //         sessionStorage.removeItem("tagIndex");
        //         next();
        //     }
        // }
    }

</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .page {
        background: $bgcolor1;
    }

    .head_fixed{
        position: relative;
        top:0;
        left: 0;
        right: 0;
        // height: rpx(200);
        z-index: 3;
        .banner{
            width: 100%;
            height: rpx(250);
            min-height: rpx(250);
        }
        .searchWrap{
            position: absolute;
            width: 100%;
            top: rpx(20);
            display: flex;
            justify-content: center;
            align-items: center;
            .searchBar{
                background: #fff;
                display: flex;
                align-items: center;
                padding: rpx(15) rpx(10);
                border-radius: rpx(30);
                width: rpx(600);
                img{
                    width: rpx(32);
                    height: rpx(32);
                    margin: 0 rpx(15);
                }
                input{
                    width: 100%;
                    height: 100%;
                }
            }
            .back {
                padding: rpx(20) 0;
                width: rpx(42);
                height: rpx(42);
                margin-right: rpx(20);
            }
        }
        .head-city{
            position: absolute;
            top: rpx(140);
            left: rpx(60);
            display: flex;
            align-items: center;
            .name{
                font-size: rpx(40);
                color: $color0;
            }
            .cut{
                width: rpx(32);
                height: rpx(32);
                margin-left: rpx(20);
            }
        }
        .head-weather {
            position: absolute;
            right: rpx(20);
            top: rpx(170);
            background: rgba(0,0,0,0.5);
            padding: rpx(8) rpx(15);
            border-radius: rpx(20);
            font-size: rpx(27);
            color: $color0;
            span{
                font-weight: bolder;
            }
        }
        .menuTab{
            padding: rpx(20);
            display: flex;
            justify-content: space-between;
            align-items: center;
            .allBtn{
                background: #ff7d00;
                color: #fff;
                padding: rpx(10) rpx(15);
                border-radius: rpx(5);
            }
            .menuTab-sort{
                height: rpx(30);
                padding-left: rpx(25);
                border-left: .5px solid #cccccc;
                display: flex;
                align-items: center;
            }
            img{
                width: rpx(42);
                height: rpx(42);
                margin-right: rpx(15);
            }
        }
    }

    .loadmore-wrapper{
        margin-top: -1px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .loadmore-loading{
        text-align: center;
        height: rpx(120);
        line-height:  rpx(120);
        color: $color5;
    }
    .loadmore-loading div {
        display: inline-block;vertical-align: middle;margin-right: 5px;
    }
    .city {
        &-list {
            // padding: rpx(20) rpx(20) 0 rpx(20);
            width: 100%;
            padding: 2.66% 2.66% 0 2.66%;
            display: flex;
            flex-wrap: wrap;
            &-item {
                box-sizing: border-box;
                width: 48.67%;
                margin-right: 2.66%;
                margin-bottom: 2.66%;
                position: relative;
                background: $color0;
                border-radius: rpx($radius6);
                box-shadow: rpx(6) rpx(8) rpx(6)  #969696;
                &-img {
                    width: 100%;
                    height: rpx(200);
                    border-radius: rpx($radius6) rpx($radius6) 0 0;
                    z-index: 1;
                }
                &-tag {
                    position: absolute;
                    right: rpx(20);
                    top: rpx(20);
                    z-index: 2;
                    span {
                        display: inline-block;
                        margin-right: rpx(20);
                        min-width: rpx(90);
                        padding: 0 rpx(10);
                        height: rpx(40);
                        line-height: rpx(40);
                        border-radius: $radius6;
                        background: $color3;
                        text-align: center;
                        font-size: rpx(24);
                        color: $color0;
                    }
                }
                &-dayTag {
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: #ff7c00;
                    text-align: center;
                    font-size: rpx(24);
                    color: #fff;
                    padding: rpx(8) rpx(12);
                    border-top-left-radius: rpx($radius6);
                }
                &-tags {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 0 rpx(15) rpx(10) rpx(15);
                    .goodstag{
                        display: inline-block;
                        height: rpx(40);
                        line-height: rpx(40);
                        border-radius: $radius6;
                        border: 1px solid #ff7c00;
                        background: #fff;
                        text-align: center;
                        font-size: rpx(24);
                        color: #ff7c00;
                        padding: 0 rpx(10);
                    }
                    .sell{
                        font-size: rpx(24);
                        color: #999;
                    }
                }
                &-cityName {
                    position: absolute;
                    top: rpx(10);
                    right: rpx(15);
                    z-index: 2;
                    background-color: rgba(black, 0.7);
                    padding: rpx(5);
                    border-radius: rpx(20);
                    img {
                        width: rpx(24);
                        height: rpx(24);
                    }
                    span {
                        display: inline-block;
                        color: $color0;
                        padding: 0 rpx(6);
                        font-size: rpx(20);
                        font-weight: 300;
                    }
                }
                &-t1 {
                    margin: rpx(15);
                    font-weight: bold;
                    font-size: rpx(30);
                    line-height: 130%;
                    min-height: rpx(76);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                &-price {
                    padding: rpx(10) rpx(15) rpx(15);
                    font-size: rpx(28);
                    color: $color3;
                    
                }
            }
            &-item:nth-child(2n){
                margin-right: 0;
            }
        }
    }
    .filtrateWrap {
        transition: width 5s;
        position: fixed;
        right: 0;
        width: 75%;
        max-height: 100%;
        height: 100%;
        background: #fff;
        z-index: 6;
        animation: unfold 0.3s;
        -webkit-animation: unfold 0.3s;
        animation-fill-mode: forwards;
        padding: 1% 3% 0;
        &-title{
            font-weight: bold;
            font-size: rpx(34);
            margin: rpx(20) 0;

        }
        &-tags{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            &-item{
                width: 31%;
                font-weight: 300;
                background: #f6f6f6;
                text-align: center;
                padding: rpx(15) 0;
                margin: rpx(10) 3.3% rpx(10) 0;
                cursor: pointer;
                border-radius: rpx(5);
            }
            &-item.active{
                color: #fff;
                background: #ff7c00;
            }
            &-item:nth-child(3n){
                margin-right: 0;
            }
            &-line{
                height: 1px;
                width: 15%;
                background: #cccccc;
                margin: 0 3%;
            }
            input{
                width: 31%;
                padding: rpx(15) rpx(15);
                font-size: rpx(28);
                background: #f6f6f6;
            }

            input::-ms-input-placeholder{
                text-align: center;
            }
            input::-webkit-input-placeholder{
                text-align: center;
            }

        }
        &-btns{
            position: absolute;
            left: 0;
            bottom: rpx(90);
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            div{
                background: #f6f6f6;
                padding: rpx(35) 0;
                font-size: rpx(32);
                flex: 1;
                text-align: center;
                cursor: pointer;
            }
            &>&-confirm{
                background: #ff7d01;
                color: #fff;
            }
        }
    }
    @-webkit-keyframes unfold /* Safari and Chrome */ {
        0% {
            width: 0%;
        }
        100% {
            width: 75%;
        }
    }
    /*右侧隐藏层*/
    .shade {
        border: 1px solid #000000;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 5;
        background-color: #000000;
        top: 0;
        bottom: 0;
        opacity: 0.3;
    }


</style>